<template>
  <div class="user-profile">
    <div class="profile-header">
      <!-- 用户头像 - 圆形显示昵称前三个字 -->
      <div class="avatar-container" :class="{ 'vip-avatar': user.isVip }">
        <div class="avatar-circle">
          {{ getInitials(user.avatar) }}
        </div>
        <div class="vip-badge" @click="navigateToVip">
          <van-icon name="diamond-o" />
        </div>
      </div>
      
      <div class="user-info">
        <!-- 钱包地址 -->
        <div class="user-id">
          <span>{{ formatAddress(user.address) }}</span>
          <van-icon name="copy-o" class="copy-icon" @click="onCopy" />
        </div>
        
        <!-- 会员信息 -->
        <div class="user-vip">
          <van-tag type="warning" class="vip-tag"  @click="navigateToVip">VIP {{ user.vipLevel }}</van-tag>
          <span class="vip-since">会员 · {{ user.shortAddress }}</span>
        </div>
        
        <!-- 邀请码 -->
        <div class="user-invite">
          <span class="invite-label">邀请码:</span>
          <span class="invite-code">{{ user.inviteCode || '未绑定' }}</span>
        </div>
          <!-- 邀请码人 -->
        <div class="user-invite">
          <span class="invite-label">邀请人:</span>
          <span class="invite-code">{{ user.inviter || '未绑定' }}</span>
        </div>
      </div>
      
      <van-button 
        icon="setting-o" 
        round 
        plain 
        size="small" 
        class="settings-button"
        @click="onSettings" 
      />
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

const props = defineProps({
  user: {
    type: Object,
    required: true
  }
});

const emit = defineEmits(['copy', 'settings']);

// 获取用户昵称的前三个字符作为头像
const getInitials = (address) => {
  if (!address) return '用户';
  
  // 如果是钱包地址格式，取中间部分
  if (address.length > 3) {
    return address.substring(0, 2).toUpperCase();
  }
  
  // 否则取前三个字符
  return address.substring(0, 3);
};

// 格式化钱包地址显示
const formatAddress = (address) => {
  if (!address) return '';
  
  // 如果地址已经是短格式，直接返回
  if (address.length < 15) return address;
  
  // 否则格式化为 0x1234...5678 格式
  return `${address.substring(0, 6)}...${address.substring(address.length - 4)}`;
};


// 复制地址到剪贴板
const onCopy = () => {
  // 触发父组件的copy事件，由父组件处理复制逻辑
  if (props.user && props.user.address) {
    emit('copy', props.user.address);
  }
};

const onSettings = () => {
  emit('settings');
};

// 导航到VIP页面
const navigateToVip = () => {
  router.push('/vip');
};
</script>

<style scoped>
.user-profile {
  background-color: white;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.profile-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

/* 头像样式 */
.avatar-container {
  position: relative;
  margin-right: 16px;
}

.avatar-circle {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

.vip-avatar::after {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  z-index: -1;
}

.vip-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: #ff8c00;
  color: white;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid white;
  cursor: pointer;
  transition: transform 0.2s;
}

.vip-badge:active {
  transform: scale(0.9);
}

/* 用户信息样式 */
.user-info {
  flex: 1;
}

.user-id {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.user-id span {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-right: 8px;
}

.copy-icon {
  color: #666;
  font-size: 16px;
  padding: 4px;
  cursor: pointer;
}

.copy-icon:hover {
  color: #2575fc;
}

.user-vip {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.vip-tag {
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  color: white;
  border: none;
  font-weight: bold;
  padding: 2px 8px;
}

.vip-since {
  margin-left: 8px;
  font-size: 12px;
  color: #666;
}

.user-invite {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #666;
}

.invite-label {
  margin-right: 4px;
}

.invite-code {
  font-weight: 500;
  color: #333;
  background-color: #f5f5f5;
  padding: 2px 8px;
  border-radius: 4px;
}

/* 设置按钮样式 */
.settings-button {
  border-color: #ddd;
  color: #666;
}

/* 地址信息样式 */
.user-address {
  border-top: 1px solid #f0f0f0;
  padding-top: 16px;
  margin-top: 8px;
}

.address-header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  color: #666;
  font-size: 14px;
}

.address-header .van-icon {
  margin-right: 4px;
}

.address-content {
  font-size: 13px;
  color: #999;
  word-break: break-all;
  background-color: #f9f9f9;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px dashed #eee;
}
</style>
